﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
	    <meta name="description" content="能源管理云端">
	    <meta name="keyword" content="能源">
	    <title>能源管理云端</title>
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>

    <body>
    	<header>
    		<h3>中瑞绿能</h3>
    		<h2>能源管理云端</h2>
    		<div>
    			<div>
    				<p><img src=""/><span>多云转晴</span><span>-10℃  ~ -5℃</span></p>
    				<p>北京时间 2018-05-18 13：30：00</p>
    			</div>
    			<ul>
    				<li>
    					<a href="" class="user">
		    				<img src="img/github.png"/><span>超级用户</span>
		    			</a>
    				</li>
    				<li><a href="" class="menu"><img src="img/github.png"/></a></li>
    				<li><a href="" class="instal"><img src="img/github.png"/></a></li>
    				<li><a href="" class="back"><img src="img/github.png"/></a></li>
    			</ul>
    		</div>
    	</header>
    	
    	<div class="container">
	    	<aside>
	    		<div class="row">
	    			<h6>运行状态</h6>
	    			<div class="wave-box">
						<div class="wave-item">
							<span>充电</span>
							<p><em>28</em>组</p>
							<div class="wave-cont"><div class="wave" style="height:28%"></div></div>
						</div>
	    				<div class="wave-item"><span>放电</span><p><em>81</em>组</p><div class="wave-cont"><div class="wave" style="height:81%"></div></div></div>	
	    				<div class="wave-item"><span>待机</span><p><em>61</em>组</p><div class="wave-cont"><div class="wave" style="height:61%"></div></div></div>
	    				<div class="wave-item"><span>脱离</span><p><em>35</em>组</p><div class="wave-cont"><div class="wave" style="height:35%"></div></div></div>
	    			</div>
	    		</div>
	    		<div class="row">
	    			<h6>容量状态</h6>
	    			<div class="progress-box">
	    				<div class="pro-item">
	    					<span><img src="img/github.png"/></span>
		    				<p>SOC (60%-80%)<span>12组</span></p>
		    				<div><p class="bg1" style="width:35%"></p></div>
	    				</div>
	    				<div class="pro-item">
	    					<span><img src="img/github.png"/></span>
		    				<p>SOC (60%-80%)<span>12组</span></p>
		    				<div><p class="bg2" style="width:20%"></p></div>
	    				</div>
	    				<div class="pro-item">
	    					<span><img src="img/github.png"/></span>
		    				<p>SOC (60%-80%)<span>12组</span></p>
		    				<div><p class="bg3" style="width:80%"></p></div>
	    				</div>
	    				<div class="pro-item">
	    					<span><img src="img/github.png"/></span>
		    				<p>SOC (60%-80%)<span>12组</span></p>
		    				<div><p class="bg4" style="width:40%"></p></div>
	    				</div>
	    				<div class="pro-item">
	    					<span><img src="img/github.png"/></span>
		    				<p>SOC (60%-80%)<span>12组</span></p>
		    				<div><p class="bg5" style="width:55%"></p></div>
	    				</div>
	    			</div>
	    		</div>
	    		<div class="row">
	    			<h6>电池健康状态</h6>
	    			<div class="pie-box">
	    				<div id="main" style="width:100%;height:250px;"></div>
    					<div class="num bg1"><span>27</span><p><i></i>优</p></div>
    					<div class="num bg2"><span>27</span><p><i></i>优</p></div>
    					<div class="num bg3"><span>27</span><p><i></i>优</p></div>
    					<div class="num bg4"><span>27</span><p><i></i>优</p></div>
	    			</div>	
	    		</div>
	    	</aside>
	    	
	    	<section>
    			地图
    		</section>
    		
    		<aside>
	    		<div class="row">
	    			<h6>当前离线原因分布<h6>
	    			<div></div>
	    		</div>
	    		<div class="row">
	    			<h6>报警分布</h6>
	    			<div></div>
	    		</div>
	    		<div class="row">
	    			<h6>历史告警</h6>
	    			<div></div>
	    		</div>
	    	</aside>
    	</div>
    	
    	
    	
    	
    	<footer>
    		<ul>
    			<li class="active"><a><img src="img/github.png"/><span>运行监控</span></a></li>
    			<li><a><img src="img/github.png"/><span>设备管理</span></a></li>
    			<li><a><img src="img/github.png"/><span>报警设备</span></a></li>
    			<li><a><img src="img/github.png"/><span>运维管理</span></a></li>
    			<li><a><img src="img/github.png"/><span>统计分析</span></a></li>
    			<li><a><img src="img/github.png"/><span>系统设置</span></a></li>
    			<li><a><img src="img/github.png"/><span>生成报表</span></a></li>
    		</ul>
    	</footer>
    </body>
    
    <script src='js/jquery-1.8.3.min.js'></script>
    <script src='js/echarts.min.js'></script>
    <script src='js/main.js'></script>
    <script type="text/javascript">
        
    </script>
    
</html>